<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>闭包计时器</title>
		<script>
			//简单闭包
//			var a = 10;
//			function bao(){
//				console.log(a);
//			}
//			bao();
			
			//复杂闭包
//			function f1() {
//				var num  = 1; //局部变量
//				function f2() {
//					alert(num);
//				}//闭包 内层函数
//				return f2; //千万别带小括号
//			}
//			var result = f1();//申明一个变量存储外层函数的调用，此处有（）,存储的是闭包即内层函数
//			result();//调用

           //闭包使用之计数器
           
		</script>
	</head>
	<body>
		<button id="quan">全局变量来计数</button>
		<button id="ju">局部变量来计数</button>
		<button id="bi">闭包来计数</button>
		<script>
			//全局变量计数器  弊端：任何地方都可以更改全局变量的值，更改后，点击计数就不准确
			var count = 0 ;
			var quan = document.getElementById("quan");
			//console.log(quan);			
            quan.onclick =function (){
            	count++;
            	console.log("第"+ count +"次点击");
            }
            count = 8; //更改后全局变量的值后，点击计数就不准确了
            
            //局部变量来计数  弊端：每次点击，局部变量都会被重新赋值为0，故计数永远是1，效果不对
            var ju = document.getElementById("ju");
           // console.log(ju);s
           ju.onclick = function (){
           	var c2 =0;
           	c2++;
           	console.log(c2);
           }
           
           //3.闭包计数
           var bi = document.getElementById("bi");
           //console.log(bi);
           function wai(){
           	   var c3 = 0;//局部变量
           	   function nei(){//内层函数 即闭包
           	   	c3++;
           	   	console.log(c3);
           	   }
           	   return nei;
           }
           var res = wai();
          
           bi.onclick = function(){
           	  res();
           }
		</script>
	</body>
</html>
